<template>

 <div id="hosp">
      <div class="head">
        
        <img  style="width:100%; height:130px;"  src="./head.jpg"  alt="">
        <span id='title'>
          医疗救治定点医院和发热门诊一览
        </span>
<!-- -------------------    -->
     </div>
      <div class="widthDiv marginLeft">
        <el-input
          size="small"
          clearable
          v-model="pageParam.name"
          placeholder="请输入内容"
        ></el-input>
      </div>


      <div class="widthDiv">
      <el-button
        size="small"
        type="primary" round
        icon="el-icon-search"
        @click="toSearch"
        >搜索</el-button
      >
    </div>
  <!-- {{hospData}} -->

      <div id='row' v-for="(item,index) in hospData" :key="index">
          <span class="circle">
               {{ index+1 }}
           </span>
          <!-- <span type:='info' class="name">{{item.name}} </span> -->
           <div  class="name" >{{item.name}}</div>
         <i class="el-icon-location"   ></i>
          <div  @click="toJump(item)" class="distance">{{distanceTwo(currentPosition[0],currentPosition[1],item.longitude,item.latitude)}} km</div>
          <!-- <div class="tag"> -->
          <el-tag id="province" type="primary"  plain size='small' >{{item.province}}{{item.city}}</el-tag>
          <el-button id="h" type="primary" round plain  @click="toSub(item)" >预约核算检测</el-button>
          <!-- </div> -->
      </div>
  </div>
</template>

<script>
import axios from "../utils/request";
export default {
  data() {
    return {
      currentPosition: [],
      hospData: {},
      provinceData: [],
      pageParam: {
        page: 1,
        pageSize: 10,
        name: "",
        // title: "",
        province: "",
      },
    };
  },
  computed: {},
  methods: {
    //查找分类
    async findAllCategory() {
      let res = await axios.get("/hospital/pageQuery", {
        params: this.pageParam,
      }); //发请求

      this.provinceData = res.data.list;
      // console.log(this.provinceData);
    },

    toSearch() {
      // this.pageParam.page = 1;
      this.pageQuery();
    },
    toJump(hospitial) {
      console.log(hospitial);
      // 使用js进行路由跳转页面
      // this.$router.push('/hospMap');
      this.$router.push({
        path: "/hospMap",
        query: {
          longitude: hospitial.longitude,
          latitude: hospitial.latitude,
          name: hospitial.name,
        },
      });
    },
    toSub(hospitial) {
      console.log(hospitial);
      // 使用js进行路由跳转页面
      // this.$router.push('/hospMap');
      this.$router.push({
        path: "/sub",
        query: {
          name: hospitial.name,
          // latitude: hospitial.latitude,
        },
      });
    },
    distanceTwo(lng1, lat1, lng2, lat2) {
      var radLat1 = (lat1 * Math.PI) / 180.0;
      var radLat2 = (lat2 * Math.PI) / 180.0;
      var a = radLat1 - radLat2;
      var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137; // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;
      // console.log("两地距离千米：", s);
      return s;
    },
    async pageQuery() {
      let res = await axios.get("/hospital/pageQuery", {
        params: this.pageParam,
      });
      this.hospData = res.data.list;
      // console.log(this.hospData);
    },
  },
  created() {
    this.pageQuery();
    this.findAllCategory();
    navigator.geolocation.getCurrentPosition(
      (data) => {
        // console.log(data, "=-=-=-=-=");
        this.currentPosition = [data.coords.longitude, data.coords.latitude];
      },
      (err) => {
        console.log(err);
      },
      {
        enableHighAccuracy: true, //高精度
        timeout: 5000, //超时时间
        maximumAge: 10000, //位置缓存时间
      }
    );
  },
  mounted() {},
};
</script>
<style  scoped>
/* .tag{
 position: absolute;
  left: 25px;
  top: 25px;
} */
.name{
    /* position: relative;
    left: 10px;
     top:-100px; */
     display: inline;
    margin-left: 10px;
    font-size: 17px;
}

#head {
  margin: 0px;
}
#row {
  border-bottom: 3px solid rgb(241, 241, 241);
  position: relative;
}

.circle {
  width: 1.2em;
  background-color: #ecebeb;
  color: #333;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 1.2em;
}

.el-icon-location {
  color: rgb(255, 196, 196);
  position: absolute;
  right: 220px;
  top: 30px;
  /* line-height: center; */
  font-size: 30px;
}
/* .name{
    margin: 500px;
} */
/* #province {
  position: absolute;
  left: 20px;
  top: 60px;
  font-size: 12px;
} */
#h{
  position: absolute;
  right: 45px;
   top: 30px;
}
.distance {
  position: absolute;
  right: 200px;
  top: 20px;
}

#hosp {
  font-size: 15px;
  line-height: 100px;
  /* border: 9px solid rgb(241, 241, 241); */
}
#row {
  position: relative;
  top: -180px;
  left: 10px;
}
#title {
  color: rgb(238, 165, 194);
  position: relative;
  top: -160px;
  left: 30px;
  font-weight: bold;
  font-size: 27px;
}
.widthDiv {
  width: 200px;
  display: inline-block;
  margin-right: 10px;

  line-height: 0px;
  position: relative;
  top: -150px;
  left: 0px;
  /* float: left; */
}
.marginLeft {
  margin-left: 10px;
  line-height: 0px;
  position: relative;
  top: -150px;
  left: 0px;
}
</style>